/*
@author: stanfor
@date: 2023/4/12 13:20
@Version: 1.0
@last modify time : 2023/4/12 13:20
*/

import React from 'react';
import { Space, Tag } from 'antd';
import SForm, { NForm, SFields } from '@C/base/SForm';
import STable, { ColumnType } from '@C/base/STable';
import {
  BlackKnight, BigDollarBuckles, PlasticJoint, PolymerHose,
  WaterPipe, WearResistantBraidedTape, WhiteWaterZone, wirePipe
} from './common';

const Index = () => {
  const [useForm] = NForm.useForm();
  const columns: Array<Partial<ColumnType>> = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (text: any) => <a>{text}</a>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: 'Tags',
      key: 'tags',
      dataIndex: 'tags',
      // @ts-ignore
      render: (_: any, { tags }: { tags: [] }) => (
        <>
          {tags.map((tag: string) => {
            let color = tag.length > 5 ? 'geekblue' : 'green';
            if (tag === 'loser') {
              color = 'volcano';
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: 'Action',
      key: 'action',
      // @ts-ignore
      render: (_: any, record: { name: '' }) => (
        <Space size="middle">
          <a>Invite {record.name}</a>
          <a>Delete</a>
        </Space>
      ),
    },
  ];

  return (
    <>
      <SForm
        footerBtnType="search"
        form={useForm}
        autoComplete
        onSubmit={(validate) => {
          console.log('validate: ', validate);
        }}
        // eventBtnConfig={{
        //   hideCancelBtn: true
        // }}
      >
        <SFields.SSelect name="waterPipe" label="水管" options={WaterPipe} span={6}/>
        <SFields.SSelect name="wirePipe" label="钢丝管" options={wirePipe} span={6}/>
        <SFields.SSelect name="whiteWaterZone" label="白水带" options={WhiteWaterZone} span={6}/>
        <SFields.SSelect name="wearResistantBraidedTape" label="耐磨编织袋" options={WearResistantBraidedTape} span={6}/>
        <SFields.SSelect name="polymerHose" label="高分子水带" options={PolymerHose} span={6}/>
        <SFields.SSelect name="plasticJoint" label="塑料接头" options={PlasticJoint} span={6}/>
        <SFields.SSelect name="bigDollarBuckles" label="大美卡扣" options={BigDollarBuckles} span={6}/>
        <SFields.SSelect name="blackKnight" label="黑武士" options={BlackKnight} span={6}/>
      </SForm>
      <STable
        title="进货单"
        columns={columns}
      />
    </>
  );
};

export default Index;
